import E from "wangeditor";
const { $ } = E;
const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E;
class AlertMenu extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="首行缩进" style="z-index:auto;">
             <i class="el-icon-s-fold"></i>
          </div>`
    );
    super($elem, editor);
  }

    // 菜单点击事件
    clickHandler(value) {
    const editor = this.editor;
    const $elems = editor.selection.getSelectionRangeTopNodes(); //$elems——选中完整段落或多个段落——上级节点
    if ($elems.length > 0) {
      $elems.forEach((item) => {
        // operateElement($(item), value, editor)
        const $elem = $(item).getNodeTop(editor); //获取选中的上一级节点
        const reg = /^(P|H[0-9]*)$/; //判断是不是p\h标签
        //getNodeName获取标签名
        if (reg.test($elem.getNodeName())) {
          const $elem1 = $elem.elems[0]; //获取每一行的带标签内容
          if ($elem1.style["textIndent"] === "") {
            //如果此时的样式没有缩进，就添加缩进样式
            $elem.css("text-indent", "2em");
          } else {
            //如果此时的样式有缩进，就取消缩进样式
            $elem.css("text-indent", "");
          }
        }
      });
    }
    // 恢复选区
    editor.selection.restoreSelection();
    this.tryChangeActive(); //菜单高亮
    }
    
    tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        // this.active()
        const editor = this.editor;
        const $selectionElem = editor.selection.getSelectionStartElem(); //获取选中的dom信息
        const $selectionStartElem = $($selectionElem).getNodeTop(editor); //获取选中的上级节点信息
        // console.log($selectionElem, $selectionStartElem.length <= 0, "这是啥");
 
        if ($selectionStartElem.length <= 0) return; //如果没有上级节点就止步于此
 
        if ($selectionStartElem.elems[0].style["textIndent"] != "") {
            //如果有样式，就激活菜单
            // active 、unActive方法是官方提供的菜单激活方法
            this.active();
        } else {
            this.unActive();
        }
    }
}

export default AlertMenu;